<template>
  <div>
    <el-row type="flex" justify="center">
      <el-col :span="1"> </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="18.5" class="card1">
        <h1 class="hh1">您已完成测试！</h1>

        <el-card class="box-card" shadow="never" style="height: 50vh">
          <div style="height: 70px">您的MBTI鉴定结果为:</div>
          <div style="height: 70px; color: rgb(51, 65, 87)">{{ mal }}-{{ mname }}</div>
          <div style="height: 60px">
            <el-input v-model="input1" class="w-50 m-2" size="large" placeholder="输入学号" :prefix-icon="Search"> </el-input>
          </div>
          <div style="height: 60px">
            <el-input
              v-model="input2"
              class="w-50 m-2"
              size="large"
              placeholder="输入测试时间 如:2002-10-12 14:03"
              :prefix-icon="Search"
            >
            </el-input>
          </div>
          <div style="height: 70px">
            <el-button type="primary" @click="router()">查看此人格资料</el-button>
          </div>
        </el-card>

        <div style="margin: 0 auto">
          <el-divider></el-divider>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { h } from 'vue'
import moment from 'moment'
import { ElNotification } from 'element-plus'
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
export default {
  name: 'Testover',
  data() {
    return {
      mal: '',
      mname: '',
      vue: '/',
      input1: ref(''),
      input2: ref(moment().format('YYYY-MM-DD h:mm:ss')),
    }
  },
  methods: {
    router() {
      this.vue = this.vue.concat(this.mal)
      this.$router.push({ path: this.vue })
      this.insertlog()
    },
    insertlog() {
      this.$axios.get('/insertlog', { params: { sid: this.input1, date: this.input2, mal: this.mal } })
      ElNotification({
        title: '成功！',
        message: h('i', { style: 'color: coral' }, '数据已上传！'),
      }).catch(function (error) {
        // 处理错误情况
        console.log(error)
      })
    },
  },
  created() {
    const that = this
    this.$axios
      .get('/getres')
      .then(function (response) {
        // 处理成功情况
        that.mal = response['data']['mal']
        that.mname = response['data']['mname']
      })
      .catch(function (error) {
        // 处理错误情况
        console.log(error)
      })
  },
  setup() {
    const activeNames = ref([''])
    const value = ref()
    const icons = [Search]
    //const open1 = () => {
    //    ElNotification({
    //        title: "完成",
    //        message: h('i', { style: 'color: coral' }, '您已选择了A'),
    //    })
    //}
    //const open2 = () => {
    //    ElNotification({
    //        title: "完成",
    //        message: h('i', { style: 'color: coral' }, '您已选择了B'),
    //    })
    //}
    return { activeNames, value, icons }
  },
}
</script>

<style>
.hh1 {
  text-align: center;
  color: rgb(51, 65, 87);
}
.el-row {
  margin-bottom: 50px;
}
.grid-content {
  /* background: rgb(14, 214, 131); */
  border-radius: 4px;
  min-height: 5px;
  min-width: 100px;

  text-align: center;
}
.card1 {
  height: 80vh;
  width: 1100px;
  border-radius: 30px;
  /* box-shadow: 0 2px 12px 0 rgb(243, 102, 102); */
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); */
}
</style>
